<template>
    <div class="logining">
        <div class="logo"><img src="../../common/image/LOGO.png" alt=""></div>
        <div class="form_box">
                <input type="text" name="email" v-on:input="email" placeholder="请输入您的邮箱">
                <input type="password" name="pasw" v-on:input="pasw" placeholder="请输入密码">
                <button @click="login">登录</button>
        </div>
        <div class="pasw"><router-link to="/forget">忘记密码?</router-link></div>
        <div class="registerby"><router-link to="/register">还未注册账号?</router-link></div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import { RequestGet,RequestPost} from '@/api/http.js'
    export default {
        data (){
            return{
                emailnum:'',
                paswnum:''
            }
        },
        methods:{
            email(e){
                let email = document.querySelector('input[name=email]');
                this.emailnum = e.target.value;
                if(this.emailnum != ''){
                    email.style.border = 'none';
                    email.className = '';
                     if(!(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.emailnum))){
                        email.style.border = '1PX solid red';
                        email.className = 'active_no';
                        Toast({
                            message: '请输入正确的邮箱！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        email.style.border = 'none';
                        email.className = '';
                    }
                }
            },
            pasw(e){
                let pasw = document.querySelector('input[name=pasw]');
                this.paswnum = e.target.value;
                if(this.paswnum != ''){
                    pasw.style.border = 'none';
                    pasw.className = '';
                    if(!(/^[0-9a-zA-Z]{6,10}$/.test(this.paswnum))){
                        pasw.style.border = '1PX solid red';
                        pasw.className = 'active_no';
                        Toast({
                            message: '请输入正确的密码！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        pasw.style.border = 'none';
                        pasw.className = '';
                    }
                }
            },
            login(){
               let email = document.querySelector('input[name=email]');
               let pasw = document.querySelector('input[name=pasw]');

               if(this.emailnum != '' && this.paswnum != ''){
                   let user_storage = JSON.parse(localStorage.getItem('mp'));
                   RequestPost({url:'/user/index',data: {'username':this.emailnum,'password':this.paswnum,'bind':user_storage}}).then((respones)=>{
                       if(respones.data.code == 1){
                           this.is_login = true;
                           this.userName = respones.data.data.username;
                           this.userEmail = respones.data.data.email;
                           this.userAvatar = respones.data.data.avatar;
                           this.userTag = respones.data.data.tag;
                           this.userId = respones.data.data.id;
                           localStorage.setItem('login',JSON.stringify(respones.data.data))
                           Toast('登录成功！');
                           this.$router.push('/personal')
                       }else{
                           Toast({
                               message: respones.data.msg,
                               position: 'top',
                               duration: 3000
                           });
                       }
               })
               }else if(this.emailnum == ''){
                   email.style.border = '1PX solid red';
                   email.className = 'active_no';
                   Toast({
                       message: '请输入正确的邮箱！',
                       position: 'top',
                       duration: 3000
                   });
               }else if(this.paswnum == ''){
                   pasw.style.border = '1PX solid red';
                   pasw.className = 'active_no';
                   Toast({
                       message: '请输入正确的密码！',
                       position: 'top',
                       duration: 3000
                   });
               }else {
                   email.style.border = '1PX solid red';
                   email.className = 'active_no';
                   pasw.style.border = '1PX solid red';
                   pasw.className = 'active_no';
                   Toast({
                       message: '请输入完整登录信息！',
                       position: 'top',
                       duration: 3000
                   });
               }
            }
        }
    }
</script>

<style scoped lang="scss">
    .logining{
        width: 100%;
        padding-top: 20%;
        .logo{
            width: 100%;
            text-align: center;
            margin-bottom: 20PX;
            img{width: 20%;}
        }
        .form_box{
            width: 100%;
            text-align: center;
                input{
                    width: 73%;
                    background: #f3f4f6;
                    text-align: center;
                    padding: 14PX;
                    border-radius: 3PX;
                    margin: 10PX auto;
                    letter-spacing: 1PX;
                    box-shadow: 1PX 2PX 10PX gainsboro;
                }
                button{
                    width: 80%;
                    background: #356aff;
                    text-align: center;
                    padding: 14PX;
                    border-radius: 3PX;
                    margin: 8PX auto;
                    color: #fff;
                    border: none;
                    letter-spacing: 5PX;
                    font-size: 14PX;
                    box-shadow: 1PX 2PX 10PX gainsboro;
                }
        }
        .pasw{
            width: 100%;
            text-align: center;
            margin-top: 6PX;
        }
        .registerby{
            width: 100%;
            text-align: center;
            margin-top: 40%;
        }
    }
</style>
<style>
    .mint-toast.is-placetop{width: 100%!important;}
    .active_no::-webkit-input-placeholder{color:red;}
</style>